﻿<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Battle Frogs</title>
    <link href="styles/jquery-ui-1.10.3.custom.min.css" rel="stylesheet" />
    <script src="scripts/jQuery-1.10.1.js"></script>
    <script src="scripts/jquery-ui-1.10.3.custom.min.js"></script>
    <link href="styles/style.css" rel="stylesheet" />
</head>
<body>
    <section id="backgroundContainer">
        <div id="wrapper">
            <header id="nav">
                <img src="images/logo.png" />
                <ul>
                    <li><a href="index.html">Home</a></li>
                    <li><a href="algo.html">Algorithm</a></li>
                    <li><a href="visualizer.html">Visualization</a></li>
                    <li><a href="about.html">Authors</a></li>
                </ul>
            </header>
            <section id="content">
                 <a href="https://twitter.com/share" class="twitter-share-button">Tweet</a>
                <canvas id="main-canvas" width="920" height="600">Canvas is not supported</canvas>
            </section>
            <footer>
                <p>BattleFrogs application. Team Nader & Aleks</p>
            </footer>
        </div>
    </section>
    <script>

        !function (d, s, id) {
            var js, fjs = d.getElementsByTagName(s)[0], p = /^http:/.test(d.location) ? 'http' : 'https';
            if (!d.getElementById(id)) {
                var text = "Jabocalypse is awesome.";
                js = d.createElement(s);
                js.id = id; js.src = p + '://platform.twitter.com/widgets.js';
                fjs.parentNode.insertBefore(js, fjs);
            }
        }(document, 'script', 'twitter-wjs');

        var scoreData = [];
        var frogData = [];
        var canvas = document.getElementById("main-canvas");
        var ctx = canvas.getContext("2d");
        var x = ctx.canvas.width / 2 | 0;
        var y = ctx.canvas.height / 2 | 0;
        var iterationCounter = 0;
        var drawingCoefficient = 3;
        var frogRadius = 3.5;
        var bulletRadius = 1;

        function drawCircleOnLocation(x, y, radius) {
            ctx.beginPath();
            ctx.arc(x, y, radius, 0, 2 * Math.PI);
            ctx.fill();
            ctx.stroke();
        }

        $.ajax({
            url: "scripts/frogData.js",
            type: "GET",
            contentType: "application/json",

            success: initializeVizualization

        });

        function initializeVizualization(data) {
            frogData = JSON.parse(data);

            var gameIteration = setInterval(function () {
                ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);

                ctx.strokStyle = "#000";
                ctx.lineWidth = 2;
                ctx.fillStyle = "blue";
                drawCircleOnLocation(x, y, drawingCoefficient * frogData[iterationCounter]["radius"]); // drawing the pond

                ctx.fillStyle = "#0EFF19";
                drawCircleOnLocation(frogData[iterationCounter]["p1positionX"] * drawingCoefficient + x, frogData[iterationCounter]["p1positionY"] * drawingCoefficient + y, drawingCoefficient * frogRadius); // drawing player 1

                ctx.fillStyle = "#f00";
                drawCircleOnLocation(frogData[iterationCounter]["p2positionX"] * drawingCoefficient + x, frogData[iterationCounter]["p2positionY"] * drawingCoefficient + y, drawingCoefficient * frogRadius); // drawing player 2

                ctx.fillStyle = "#FFEA00";
                for (var i = 0; i < frogData[iterationCounter]["bulletCount"]; i++) {
                    var bulletIndex = i + 1;
                    drawCircleOnLocation(frogData[iterationCounter]["bullet" + bulletIndex + "currentPosX"] * drawingCoefficient + x, frogData[iterationCounter]["bullet" + bulletIndex + "currentPosY"] * drawingCoefficient + y, drawingCoefficient * bulletRadius); // drawing the bullets
                }

                iterationCounter++;

                if (iterationCounter >= frogData.length) {
                    clearInterval(gameIteration);
                    $.ajax({
                        url: "scripts/score.js",
                        type: "GET",
                        contentType: "application/json",
                        success: showScore
                    });
                }
            }, 150);
        }

        function showScore(data) {
            scoreData = JSON.parse(data);

            ctx.fillStyle = "blue";
            ctx.strokStyle = "#000";
            ctx.font = "bold 38px Jing Jing";
            ctx.fillText(scoreData[0]["playerName"] + " " + scoreData[0]["score"], 50, 50);
            ctx.strokeText(scoreData[0]["playerName"] + " " + scoreData[0]["score"], 50, 50);
            ctx.fillStyle = "red";
            ctx.fillText(scoreData[1]["playerName"] + " " + scoreData[1]["score"], 50, 150);
            ctx.strokeText(scoreData[1]["playerName"] + " " + scoreData[1]["score"], 50, 150);
            
        }
    </script>
</body>
</html>
